<template>
  <div class="contract-advance-setting-dropDown">
    <slot name="frontTip"></slot>
    <el-select v-model="selectValue" :placeholder="$t('contract.setting.contractAdvancedSettings.pleaseSelect')" size="large" @change="changeDropDown">
      <el-option v-for="field in optionsList" :key="field.fieldName" :label="field.displayName" :value="field.fieldName"> </el-option>
    </el-select>

    <slot name="behindTip"></slot>
  </div>
</template>
<script lang="ts">
import { defineComponent, watch, ref } from 'vue';

export default defineComponent({
  props: {
    value: {
      type: String,
      default: '',
    },
    optionsList: {
      type: Array,
      default: [],
    },
  },
  emits: ['handleChangeDropDown'],
  setup(props, { emit }) {
    const selectValue = ref('');

    watch(
      () => props.value,
      curVal => {
        selectValue.value = curVal;
      },
      { immediate: true }
    );

    const changeDropDown = val => {
      emit('handleChangeDropDown', val);
    };
    return {
      selectValue,
      changeDropDown,
    };
  },
});
</script>
